<template>
    <view class="news">
        <up-tabs :list="tabList" @click="clickTab" :scrollable="false" lineWidth="100px" itemStyle="height:50px;"
            activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:18px">
        </up-tabs>
        <view v-show="activateTab === 'news'" class="news_list_part">
            <view class="news_list_head">
                <view>全部消息设为已读</view>
            </view>
            <view class="news_list">
                <view v-for="item in newsItemList" :key="item.img" class="news_list_item"
                    @click="() => toNewsDetail(item.value)">
                    <view class="icon_part">
                        <view>
                            <image :src="item.img"></image>
                        </view>
                    </view>
                    <view class="content_part">
                        <view class="title">
                            {{ item.title }}
                        </view>
                        <view class="content">
                            <view class="no_data">暂无消息</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-show="activateTab === 'todo'" class="todo">
            <up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
                <up-empty :iconSize="150" mode="list" text="当前暂无待办" v-if="todoList.length === 0"></up-empty>
                <up-list-item v-for="item in todoList" :key="item.assignorId">
                    <view class="todo-list">
                        <view class="todo-item">
                            <view class="todo-content">
                                <view class="todo-title">委托收款协议</view>
                                <view class="todo-info">
                                    <view class="info-line">
                                        <text class="info-label">委托方：</text>
                                        <text class="info-value">{{ item.assignorName }}</text>
                                    </view>
                                    <view class="info-line">
                                        <text class="info-label">状态：</text>
                                        <text class="info-value status"
                                            :class="{ 'status-waiting': item.status === 'NOT_AUTH' }">
                                            {{ item.status === 'NOT_AUTH' ? '待签署' : item.status }}
                                        </text>
                                    </view>
                                    <view class="info-line">
                                        <text class="info-label">创建时间：</text>
                                        <text class="info-value">{{ item.createTime }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="todo-action">
                                <up-button v-if="item.status === 'NOT_AUTH'" @click="handleSign(item)" shape="circle"
                                    type="primary" :disabled="signing" :loading="signing" :text="signing ? '签署中' : '签署'"
                                    style="width: 100px;"></up-button>
                            </view>
                        </view>
                    </view>
                </up-list-item>
                <LoadMore :status="status" v-if="todoList.length !== 0"></LoadMore>
            </up-list>
        </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    onMounted
} from "vue"
import {
    getAssignor,
    SignContract
} from '@/api/driver'
import {
    debounce
} from "@/utils/debounce"


/* 数据 */
// 提示
const uToastRef = ref<any>(null)
// tabs
const tabList = reactive([{
    name: '消息',
    id: 'news'
}, {
    name: '待办',
    id: 'todo',
    badge: {
        isDot: false // 使用红点
    }
}])
const activateTab = ref('news')
// 消息的三个分类
const newsItemList = reactive([{
    title: '业务进度提醒',
    img: '/static/images/icon/business_progress.png',
    value: "business_progress"
},
{
    title: '资金变动提醒',
    img: '/static/images/icon/change_funds.png',
    value: "change_funds"
},
{
    title: '账号资源提醒',
    img: '/static/images/icon/account_resources.png',
    value: "account_resources"
}
])
// 获取消息集合的分页参数
const getTodoListParams = reactive({
    currPage: 1,
    limit: 10
})
// 消息数组
const todoList = reactive<any[]>([])
const status = ref('loadmore')
// 列表数据还有没有下一页
const hasNextPage = ref(false)
// 是否签署中
const signing = ref(false)




/* 函数 */
// tab点击
const clickTab = async (e: any) => {
    activateTab.value = e.id
    todoList.length = 0
    if (e.id === 'todo') {
        getTodoListParams.currPage = 1
        await getTodoList(getTodoListParams)
    }
}
// 获取信息列表
const getTodoList = async (params: typeof getTodoListParams) => {
    uToastRef.value.show({
        type: 'loading',
        message: "加载中...",
        duration: -1
    })
    let res = await getAssignor(params)
    uToastRef.value.hide()
    if (res.success) {
        hasNextPage.value = res.data.hasNextPage
        if (!res.data.hasNextPage) {
            status.value = "nomore"
        } else {
            status.value = "loadmore"
        }
        todoList.push(...res.data.list)
        // 更新badge状态
        if (tabList[1].badge) {
            tabList[1].badge.isDot = res.data.list && res.data.list.length > 0
        }
    }
}
// 跳转详情
const toNewsDetail = (type: string) => {
    uni.navigateTo({
        url: `/package_mine/pages/news/detail?type=${type}`
    })
}
// 触底刷新
const scrolltolower = async () => {
    if (hasNextPage.value) {
        status.value = "loading"
        getTodoListParams.currPage = getTodoListParams.currPage + 1
        await getTodoList(getTodoListParams)
    } else {
        status.value = "nomore"
    }
}
// 签署合同
const handleSign = (item: any) => {
    if (signing.value) return
    signing.value = true
    uToastRef.value.show({
        type: 'loading',
        message: "签署中...",
        duration: -1
    })
    let params = {
        assignorId: item.assignorId
    }
    debounce(() => {
        sign(params)
    })()
}
// 签署请求封装
const sign = async (params: { assignorId: string }) => {
    let res = await SignContract(params)
    signing.value = false
    uToastRef.value.hide()
    if (res.success) {
        if (res.data.redirectUrl) {
            let redirectUrl = res.data.redirectUrl
            redirectUrl = redirectUrl.replace("?", "$")
            redirectUrl = redirectUrl.replace("=", "!")
            uni.navigateTo({
                url: `/package_mine/pages/news/webviewSigning?redirectUrl=${redirectUrl}`
            })
        } else {
            uToastRef.value.show({
                type: 'warning',
                message: "暂无跳转地址"
            })
        }
    }
}


/* 钩子 */
onMounted(() => {
    getTodoList(getTodoListParams)
})
</script>

<style lang="scss" scoped>
.news {
    min-height: 100vh;
    background-color: #fff;

    .news_list_part {
        padding: 10px;

        .news_list_head {
            padding: 10px;
            display: flex;
            justify-content: flex-end;
            color: #a1a1a1;
        }

        .news_list {
            .news_list_item {
                display: flex;
                padding: 10px;
                border-bottom: 1px solid #ccc;

                &:last-child {
                    border-bottom: none;
                }

                .icon_part {
                    height: 75px;
                    aspect-ratio: 1/1;
                    margin-right: 20px;

                    >view {
                        width: 100%;
                        height: 100%;
                    }

                    image {
                        width: inherit;
                        height: inherit;
                    }
                }

                .content_part {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    padding: 7px 0 2px;

                    .title {
                        font-weight: bold;
                        font-size: 20px;
                    }

                    .content {
                        .no_data {
                            color: #8a8a8a;
                            font-size: 18px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

.todo-list {
    padding: 20rpx;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

.todo-content {
    flex: 1;
}

.todo-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
}

.todo-info {
    .info-line {
        display: flex;
        margin-bottom: 12rpx;
        font-size: 28rpx;
        line-height: 1.4;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .info-label {
        color: #999;
        min-width: 140rpx;
    }

    .info-value {
        color: #666;
        flex: 1;
    }

    .status {
        &.status-waiting {
            color: #FF6A00;
            font-weight: 500;
        }
    }
}

.todo-action {
    margin-left: 30rpx;
}

.sign-btn {
    background: linear-gradient(90deg, #2979FF, #00B0FF);
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 0 40rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
    transition: all 0.3s;

    &:active {
        transform: scale(0.95);
        opacity: 0.9;
    }

    &[disabled] {
        background: #ccc;
        box-shadow: none;
    }
}
</style>